<template>
  <div class="doctor-register-page">
    <!-- 背景装饰 -->
    <div class="background-decoration">
      <div class="circle circle-1"></div>
      <div class="circle circle-2"></div>
      <div class="circle circle-3"></div>
    </div>
    
    <!-- 主要内容 -->
    <div class="register-container">
      <!-- 左侧注册面板 -->
      <div class="register-panel">
        <div class="register-content">
          <!-- 注册标题 -->
          <div class="register-header">
            <h2 class="register-title">医生注册</h2>
            <p class="register-subtitle">加入暖星心理守护站，开启您的专业服务之旅</p>
          </div>
          
          <!-- 注册表单 -->
          <el-form
            ref="registerFormRef"
            :model="registerForm"
            :rules="registerRules"
            size="large"
            label-position="top"
            class="form-container"
          >
            <el-form-item label="医生姓名" prop="doctorName">
              <el-input
                v-model="registerForm.doctorName"
                placeholder="请输入您的真实姓名"
                prefix-icon="User"
                clearable
                class="form-input"
              />
            </el-form-item>
            
            <el-form-item label="登录密码" prop="password">
              <el-input
                v-model="registerForm.password"
                type="password"
                placeholder="请输入6-20位登录密码"
                prefix-icon="Lock"
                show-password
                clearable
                class="form-input"
              />
            </el-form-item>
            
            <el-form-item label="确认密码" prop="confirmPassword">
              <el-input
                v-model="registerForm.confirmPassword"
                type="password"
                placeholder="请再次输入密码确认"
                prefix-icon="Lock"
                show-password
                clearable
                class="form-input"
              />
            </el-form-item>

            <el-form-item label="所属科室" prop="deptId">
              <el-select
                v-model="registerForm.deptId"
                placeholder="请选择所属科室"
                size="large"
                class="form-input"
                clearable
              >
                <el-option
                  v-for="dept in departments"
                  :key="dept.id"
                  :label="dept.name"
                  :value="dept.id"
                />
              </el-select>
            </el-form-item>

            <el-form-item label="人脸识别状态" v-if="registerForm.faceInfoId">
              <div class="face-status-info">
                <el-icon class="status-icon success"><CircleCheckFilled /></el-icon>
                <span class="status-text">人脸识别已完成，ID: {{ registerForm.faceInfoId }}</span>
                <el-button 
                  type="text" 
                  size="small" 
                  @click="resetFaceInfo"
                  class="reset-face-btn"
                >
                  重新注册
                </el-button>
              </div>
            </el-form-item>

            <el-form-item v-else>
              <el-alert
                title="请先完成人脸注册"
                type="warning"
                description="您需要先进行人脸注册，然后才能完成医生账户注册"
                show-icon
                :closable="false"
              >
                <template #default>
                  <el-button 
                    type="primary" 
                    size="small" 
                    @click="goToFaceRegister"
                    style="margin-top: 10px;"
                  >
                    前往人脸注册
                  </el-button>
                </template>
              </el-alert>
            </el-form-item>
            
            <el-form-item>
              <el-button
                type="primary"
                size="large"
                @click="handleSubmit"
                :loading="loading"
                class="submit-btn"
              >
                <el-icon v-if="!loading"><UserFilled /></el-icon>
                {{ loading ? '注册中...' : '立即注册' }}
              </el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
      
      <!-- 右侧信息面板 -->
      <div class="info-panel">
        <div class="brand-section">
          <div class="brand-icon">
            <el-icon size="48"><UserFilled /></el-icon>
          </div>
          <h1 class="brand-title">暖星心理守护站</h1>
          <p class="brand-subtitle">专业医生服务平台</p>
        </div>
        
        <div class="features-section">
          <div class="feature-item">
            <el-icon class="feature-icon"><Star /></el-icon>
            <div class="feature-content">
              <h3>专业认证</h3>
              <p>完善的医师资格认证体系，确保服务的专业性和权威性</p>
            </div>
          </div>
          <div class="feature-item">
            <el-icon class="feature-icon"><DataAnalysis /></el-icon>
            <div class="feature-content">
              <h3>智能管理</h3>
              <p>先进的患者管理系统，提升诊疗效率和服务质量</p>
            </div>
          </div>
          <div class="feature-item">
            <el-icon class="feature-icon"><Link /></el-icon>
            <div class="feature-content">
              <h3>协作平台</h3>
              <p>与同行专家交流合作，共同提升心理健康服务水平</p>
            </div>
          </div>
        </div>
        
        <div class="bottom-info">
          <p>已有账户？<router-link to="/doctor/login" class="link">立即登录</router-link></p>
          <p>或使用<router-link to="/register" class="link">人脸识别注册</router-link></p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { UserFilled, Star, DataAnalysis, Link, User, Lock, CircleCheckFilled } from '@element-plus/icons-vue'
import { doctorRegister } from '../../api/doctor.js'

const router = useRouter()
const loading = ref(false)
const registerFormRef = ref(null)

// 注册表单数据
const registerForm = reactive({
  doctorName: '',
  password: '',
  confirmPassword: '',
  deptId: null,
  faceInfoId: null
})

// 部门列表
const departments = ref([
  { id: 1, name: '心理科' },
  { id:2, name: '精神科' },
  { id: 3, name: '儿童心理科' },
  { id: 4, name: '青少年心理科' },
  { id: 5, name: '成人心理科' },
  { id: 6, name: '老年心理科' },
  { id: 7, name: '康复科' },
  { id: 8, name: '心理咨询科' }
])

// 确认密码验证器
const validateConfirmPassword = (rule, value, callback) => {
  if (value !== registerForm.password) {
    callback(new Error('两次输入的密码不一致'))
  } else {
    callback()
  }
}

// 表单验证规则
const registerRules = {
  doctorName: [
    { required: true, message: '请输入医生姓名', trigger: 'blur' },
    { min: 2, max: 20, message: '姓名长度在 2 到 20 个字符', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入登录密码', trigger: 'blur' },
    { min: 6, max: 20, message: '密码长度在 6 到 20 个字符', trigger: 'blur' },
    { pattern: /^(?=.*[a-zA-Z])(?=.*\d)/, message: '密码必须包含字母和数字', trigger: 'blur' }
  ],
  confirmPassword: [
    { required: true, message: '请确认密码', trigger: 'blur' },
    { validator: validateConfirmPassword, trigger: 'blur' }
  ],
  deptId: [
    { required: true, message: '请选择所属科室', trigger: 'change' }
  ]
}

// 跳转到人脸注册页面
const goToFaceRegister = () => {
  router.push('/register?for=doctor')
}

// 重新注册人脸
const resetFaceInfo = () => {
  ElMessage.info('正在跳转到人脸注册页面...')
  
  // 清除当前的人脸信息
  registerForm.faceInfoId = null
  
  // 清除localStorage中的临时数据
  localStorage.removeItem('tempFaceInfoId')
  
  // 跳转到人脸注册页面
  router.push('/register?for=doctor')
}

// 获取人脸信息ID（从URL参数或localStorage）
const getFaceInfoId = () => {
  // 首先尝试从URL参数获取
  const urlParams = new URLSearchParams(window.location.search)
  const faceInfoIdFromUrl = urlParams.get('faceInfoId')
  
  if (faceInfoIdFromUrl) {
    registerForm.faceInfoId = parseInt(faceInfoIdFromUrl)
    return
  }
  
  // 然后尝试从localStorage获取
  const faceInfoIdFromStorage = localStorage.getItem('tempFaceInfoId')
  if (faceInfoIdFromStorage) {
    registerForm.faceInfoId = parseInt(faceInfoIdFromStorage)
    // 使用后清除
    localStorage.removeItem('tempFaceInfoId')
  }
}

// 提交注册
const handleSubmit = async () => {
  if (!registerFormRef.value) return
  
  // 先检查是否有人脸信息ID
  if (!registerForm.faceInfoId) {
    ElMessage.error('请先完成人脸注册')
    return
  }
  
  try {
    const valid = await registerFormRef.value.validate()
    if (!valid) return
    
    loading.value = true
    
    // 准备注册数据
    const { confirmPassword, ...registerData } = registerForm
    
    const response = await doctorRegister(registerData)
    
    ElMessage.success({
      message: '注册成功！正在跳转到个人信息完善页面...',
      duration: 2500
    })
    
    // 保存医生基本信息到localStorage，供个人信息页面使用
    if (response.data) {
      localStorage.setItem('tempDoctorInfo', JSON.stringify(response.data))
    }
    
    // 跳转到个人信息完善页面
    setTimeout(() => {
      router.push('/doctor/info-form')
    }, 2000)
    
  } catch (error) {
    console.error('Register error:', error)
    
    ElMessage.error({
      message: error.message || '注册失败，请检查输入信息',
      duration: 3000
    })
  } finally {
    loading.value = false
  }
}

// 组件挂载时获取人脸信息ID
onMounted(() => {
  getFaceInfoId()
})
</script>

<style scoped>
.doctor-register-page {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: 
    /* 成长希望主题背景 */
    linear-gradient(120deg, 
      rgba(76, 175, 80, 0.9) 0%,     /* 活力绿色 */
      rgba(56, 142, 60, 0.8) 25%,    /* 深绿色 */
      rgba(33, 150, 243, 0.8) 75%,   /* 专业蓝色 */
      rgba(63, 81, 181, 0.9) 100%    /* 科技紫蓝 */
    ),
    /* 成长图案 */
    url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120"><defs><pattern id="growth" width="120" height="120" patternUnits="userSpaceOnUse"><g opacity="0.12"><path d="M30,60 Q40,40 60,50 Q80,60 70,80 Q60,100 40,90 Q20,80 30,60" fill="white"/><circle cx="60" cy="60" r="3" fill="white" opacity="0.8"/><path d="M60,45 L60,75 M45,60 L75,60" stroke="white" stroke-width="1.5" fill="none" opacity="0.6"/><circle cx="90" cy="30" r="2" fill="white" opacity="0.5"/><circle cx="30" cy="90" r="1.5" fill="white" opacity="0.4"/><path d="M85,25 Q90,20 95,25 Q90,30 85,25" fill="white" opacity="0.3"/></g></pattern></defs><rect width="100%" height="100%" fill="url(%23growth)"/></svg>'),
    /* 专业光晕 */
    radial-gradient(circle at 25% 25%, rgba(255,255,255,0.15) 0%, transparent 45%),
    radial-gradient(circle at 75% 75%, rgba(76, 175, 80,0.2) 0%, transparent 50%),
    radial-gradient(circle at 50% 10%, rgba(33, 150, 243,0.18) 0%, transparent 40%),
    /* 底层渐变 */
    linear-gradient(60deg, #e8f5e9 0%, #e3f2fd 100%);
  background-size: 
    100% 100%,           /* 主渐变 */
    120px 120px,         /* 成长图案 */
    280px 280px,         /* 光晕1 */
    350px 350px,         /* 光晕2 */
    300px 300px,         /* 光晕3 */
    100% 100%;           /* 底层渐变 */
  background-repeat: no-repeat;
  background-position: center center;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-x: auto;
  overflow-y: auto;
  z-index: 0;
}

.background-decoration {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 1;
}

.circle {
  position: absolute;
  border-radius: 50%;
  background: linear-gradient(120deg, 
    rgba(255, 255, 255, 0.15) 0%, 
    rgba(76, 175, 80, 0.1) 40%, 
    rgba(33, 150, 243, 0.1) 100%
  );
  backdrop-filter: blur(30px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  animation: registrationFloat 12s ease-in-out infinite;
  box-shadow: 
    0 12px 40px rgba(76, 175, 80, 0.15),
    inset 0 2px 0 rgba(255, 255, 255, 0.3);
}

.circle-1 {
  width: 180px;
  height: 180px;
  top: 8%;
  right: 10%;
  animation-delay: 0s;
}

.circle-2 {
  width: 130px;
  height: 130px;
  bottom: 15%;
  left: 8%;
  animation-delay: 4s;
}

.circle-3 {
  width: 100px;
  height: 100px;
  top: 50%;
  left: 3%;
  animation-delay: 8s;
}

@keyframes registrationFloat {
  0%, 100% { 
    transform: translateY(0px) rotate(0deg) scale(1); 
    opacity: 0.7;
  }
  25% { 
    transform: translateY(-15px) rotate(90deg) scale(1.08); 
    opacity: 0.9;
  }
  50% { 
    transform: translateY(-25px) rotate(180deg) scale(0.92); 
    opacity: 0.8;
  }
  75% { 
    transform: translateY(-10px) rotate(270deg) scale(1.05); 
    opacity: 0.85;
  }
}

.register-container {
  position: relative;
  z-index: 2;
  display: flex;
  width: min(1200px, 95vw);
  min-width: 300px;
  height: min(750px, 90vh);
  min-height: 550px;
  background: 
    linear-gradient(120deg, rgba(255, 255, 255, 0.98) 0%, rgba(250, 253, 250, 0.96) 100%);
  border-radius: 24px;
  box-shadow: 
    0 25px 50px rgba(0, 0, 0, 0.12),
    0 0 0 1px rgba(76, 175, 80, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(25px);
  overflow: hidden;
  margin: 20px;
  border: 1px solid rgba(255, 255, 255, 0.35);
}

.register-panel {
  flex: 1;
  padding: 60px 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.register-content {
  width: 100%;
  max-width: 480px;
}

.register-header {
  text-align: center;
  margin-bottom: 40px;
}

.register-title {
  font-size: 28px;
  font-weight: 700;
  color: #333;
  margin: 0 0 10px 0;
}

.register-subtitle {
  color: #666;
  font-size: 16px;
  margin: 0;
}

.form-container {
  margin-top: 30px;
}

.form-input {
  height: 50px;
  border-radius: 12px;
  border: 2px solid #f0f0f0;
  transition: all 0.3s ease;
}

.form-input:hover {
  border-color: #4CAF50;
}

.form-input.is-focus {
  border-color: #4CAF50;
  box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.1);
}

.submit-btn {
  width: 100%;
  height: 50px;
  border-radius: 25px;
  font-size: 16px;
  font-weight: 600;
  background: linear-gradient(135deg, #4CAF50 0%, #2196F3 100%);
  border: none;
  box-shadow: 0 4px 15px rgba(76, 175, 80, 0.4);
  transition: all 0.3s ease;
}

.submit-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(76, 175, 80, 0.6);
}

.info-panel {
  flex: 1;
  background: linear-gradient(135deg, #4CAF50 0%, #2196F3 100%);
  color: white;
  padding: 60px 50px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
}

.info-panel::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="rgba(255,255,255,0.08)" stroke-width="0.5"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>');
  opacity: 0.4;
}

.brand-section {
  position: relative;
  z-index: 1;
  text-align: center;
}

.brand-icon {
  margin-bottom: 20px;
}

.brand-title {
  font-size: 32px;
  font-weight: 700;
  margin: 0 0 10px 0;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.brand-subtitle {
  font-size: 18px;
  opacity: 0.9;
  margin: 0;
}

.features-section {
  position: relative;
  z-index: 1;
}

.feature-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 30px;
}

.feature-icon {
  margin-right: 20px;
  margin-top: 5px;
  font-size: 24px;
  opacity: 0.9;
}

.feature-content h3 {
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 8px 0;
}

.feature-content p {
  font-size: 14px;
  opacity: 0.9;
  margin: 0;
  line-height: 1.5;
}

.bottom-info {
  position: relative;
  z-index: 1;
  text-align: center;
  font-size: 16px;
  opacity: 0.9;
}

.bottom-info p {
  margin: 8px 0;
}

.link {
  color: white;
  text-decoration: none;
  font-weight: 600;
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
  transition: all 0.3s ease;
}

.link:hover {
  border-bottom-color: white;
}

/* 响应式设计 */
@media (max-width: 1280px) {
  .register-container {
    width: min(1000px, 95vw);
    height: min(650px, 90vh);
  }
  
  .register-panel, .info-panel {
    padding: 40px 35px;
  }
  
  .brand-title {
    font-size: 28px;
  }
}

@media (max-width: 1024px) {
  .register-container {
    flex-direction: column;
    width: min(500px, 95vw);
    height: auto;
  }
  
  .register-panel {
    padding: 40px 35px 20px 35px;
  }
  
  .info-panel {
    padding: 20px 35px 40px 35px;
  }
  
  .features-section {
    display: none;
  }
}

@media (max-width: 768px) {
  .register-container {
    width: 95%;
    margin: 20px;
    border-radius: 16px;
  }
  
  .register-panel, .info-panel {
    padding: 30px 25px;
  }
}

@media (max-width: 480px), (max-height: 480px) {
  .doctor-register-page {
    padding: 10px;
  }
  
  .register-container {
    width: 100%;
    min-width: 280px;
    height: auto;
    min-height: 450px;
    margin: 10px;
    border-radius: 16px;
  }
  
  .register-panel, .info-panel {
    padding: 20px 15px;
  }
  
  .brand-title {
    font-size: 22px;
  }
  
  .register-title {
    font-size: 20px;
  }
  
  .features-section {
    display: none;
  }
}

/* 人脸状态显示样式 */
.face-status-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background-color: #f0f9ff;
  border: 1px solid #0ea5e9;
  border-radius: 8px;
  color: #0c4a6e;
}

.status-icon {
  margin-right: 8px;
  font-size: 18px;
}

.status-icon.success {
  color: #16a34a;
}

.status-text {
  font-size: 14px;
  font-weight: 500;
  flex: 1;
}

.reset-face-btn {
  margin-left: 12px;
  color: #0ea5e9;
  font-size: 12px;
  padding: 4px 8px;
}

.reset-face-btn:hover {
  color: #0284c7;
  background-color: rgba(14, 165, 233, 0.1);
}
</style>
